<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div class="table-container">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form-model layout="inline" v-bind="searchModelConfig"
                          @keyup.enter.native="searchQuery">
              <a-row v-bind="searchRowConfig">
                <a-col :span="5">
                  <a-form-model-item>
                    <a-input v-model="queryParam.searchValue" placeholder="请输入客户名称/手机号">
                      <a-icon slot="prefix" class="font-placeholder" type="search"/>
                    </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="7">
                  <a-form-model-item label="项目名称">
                    <ry-select v-model="queryParam.applyProject" :dataSource="$getDict('APPLY_PROJECT')"
                               placeholder="请选择项目名称"></ry-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="创建时间">
                    <ry-range-picker :beginTime.sync="queryParam.beginTime" :endTime.sync="queryParam.endTime" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="5">
                  <a-form-model-item label="项目状态">
                    <ry-select v-model="queryParam.projectType" :dataSource="$getDict('PROJECT_TYPE')"
                               placeholder="请选择"></ry-select>
                  </a-form-model-item>
                </a-col>
                <a-col class="table-page-search-submitButtons" v-bind="searchColConfig">
                  <a-button @click="searchQuery" type="primary">查询</a-button>
                  <a-button @click="searchReset" type="danger">重置</a-button>
                </a-col>
              </a-row>
            </a-form-model>
          </div>

          <div class="table-operator">
            <div>
              <a-button @click="exportExcel" :loading="exportLoading" v-has="['projectListExport']">导出项目</a-button>
            </div>
          </div>

          <!-- table区域-begin -->
          <a-row>
            <a-col :span="24">
              <ry-table
                :columns="columns" :loading="loading" :data-source="dataSource"
                :rowKey="record=>record.id" :pagination="ipagination" bordered
                :scroll="{ x: 'max-content'}">
                <template slot="applyProject" slot-scope="{ text, record }">
                  <span v-if="record.applyProject">
                    <span v-for="(item, index) in record.applyProject.split(',')" :key="index">
                      <a-tag color="blue">
                        {{ $getDictName('APPLY_PROJECT', item) }}
                      </a-tag>
                    </span>
                  </span>
                  <span v-else>--</span>
                </template>
                <template slot="cellInfos" slot-scope="{text}">
                  <span v-if="text">
                    <span v-for="item in text">
                      <span><a style="color: #00A0E9">{{ item.cellCode }}</a></span>
                    </span>
                  </span>
                  <span v-else>--</span>
                </template>
                <template slot="cardName" slot-scope="{text}">
                  <span v-if="text">
                    <a-tag color="blue">{{ text }}</a-tag>
                  </span>
                  <span v-else>--</span>
                </template>
                <template slot="phone" slot-scope="{text}">
                  {{ maskPhone(text) }}
                </template>
                <template slot="projectType" slot-scope="{text, record}">
                  <span>{{$getDictName('PROJECT_TYPE', text)}}</span>
                </template>
              </ry-table>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {RyListMixin} from '@/ryweb'
import {exportExcel} from '@/utils/export.js'

export default {
  name: '',
  mixins: [RyListMixin, exportExcel],
  components: {},
  data() {
    return {
      reloadDict: true,
      show: false,
      isShow: false,
      form: {},
      queryParam: {},
      columns: [
        {
          title: '客户名称',
          align: 'center',
          dataIndex: 'businessAccount.nickname'
        },
        {
          title: '客户编号',
          align: 'center',
          dataIndex: 'businessAccount.serialNumber',
          scopedSlots: {customRender: 'serialNumber'}
        },
        {
          title: '项目',
          align: 'center',
          dataIndex: 'applyProject',
          scopedSlots: {customRender: 'applyProject'}
        },
        {
          title: '细胞编号',
          align: 'center',
          dataIndex: 'cellInfos',
          scopedSlots: {customRender: 'cellInfos'}
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'projectType',
          scopedSlots: { customRender: 'projectType' }
        },
        {
          title: '项目数量',
          align: 'center',
          dataIndex: 'projectNumber'
        },
        {
          title: '会员卡',
          align: 'center',
          dataIndex: 'cardName',
          scopedSlots: {customRender: 'cardName'}
        },
        {
          title: '实验室',
          align: 'center',
          dataIndex: 'accountSource',
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remake'
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '创建者',
          align: 'center',
          dataIndex: 'createBy'
        }
      ],
      url: {
        list: this.$api.permission.applyProject.applyProject,
        add: this.$api.permission.applyProject.insert,
        edit: this.$api.permission.applyProject.update,
        exportFile: this.$api.permission.applyProject.exportFile
      }
    }
  },
  props: {},
  methods: {
    async exportExcel() {
      this.exportLoading = true
      await this.exportXlsNotDate(this.url.exportFile, this.queryParam, '项目数据导出文件', false)
      this.exportLoading = false
    },
    maskPhone(phone) {
      if (!phone) return '';
      return phone.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");
    },
  },
  created() {
  },
  mounted() {
  }
}
</script>

<style lang="less">
#LabelInfoMaintain {
  border-left: 1px solid #f4f4f4;
}

.table-operator {
  display: flex;
  justify-content: space-between;
  align-content: center;

  .setting {
    margin-top: 5px;
    font-size: 16px;
    color: #00bbbb;
  }
}

.age_box {
  width: 100%;
  padding: 0;

  .ant-form-item {
    width: 100%;
    text-align: center;
  }

  .ant-input {
    width: 40%;
  }
}

.ant-col .ant-col-1 {
  padding: -12px;
}

.table-page-search-wrapper {
  margin-left: 0rem;
}

.table_headr {
  color: #000000;

  .labelSty {
    margin-right: 30px;
    font-size: 18px;
  }

  .ant-btn {
    text-align: center;
    background: #f2f2f2;
    color: #868686;
    border: 0;
  }

  .dataColor {
    color: #3ec2c9;
    padding: 0 10px 0 10px;
  }

  .table-search-wrapper {
    display: flex;
    justify-content: center;
    align-content: center;

    .ant-input {
      width: 100%;
    }

    .table-search-submitButtons {
      display: flex;
      justify-content: center;
      align-content: center;

      .ant-btn {
        background: #989eab;
        color: #fff;
        margin-right: 10px;
      }

      .ant-btn:first-child {
        background: #ffac54;
      }
    }
  }
}
</style>
